iT邦幫忙

2023 iThome 鐵人賽

DAY 5
0
SideProject30

sideproject-簡易網站系列 第 5

Day-5 根據Day-4所學實際應用

  • 分享至 

  • xImage
  •  

以下是本次的程式碼 有些註解掉因為沒有使用到

JS

let myHeading = document.querySelector("h1");
//myHeading.textContent = "Hello world!"; /* 用以改變h1的內容*/
myHeading.style.color = "white";          // 修改 <h1> 元素的顏色
//alert("Warning!");  //彈出式視窗
/* 
document.querySelector("html").onclick = function () {  
    alert("不要點我!");		//視窗被點擊時 且可重複觸發
    };                          
*/

var myImage = document.querySelector("img");

/*
myImage.onclick = function () {             //當圖片被點擊時
  let mySrc = myImage.getAttribute("src");
  if (mySrc === "images/RiotX_ChampionList_ksante.jpg") {       //如果是卡桑帝的圖片
    myImage.setAttribute("src", "images/RiotX_ChampionList_bard.jpg");      //更改為巴德
  } else {
    myImage.setAttribute("src", "images/RiotX_ChampionList_ksante.jpg");    //變回卡桑帝
  }
};
*/

var myButton = document.querySelector("button");

function setUserName() {
    let needInputName = localStorage.getItem("needInputName");
    if (needInputName === "true") {
        let myName = prompt("請輸入您的名稱");
        if (!myName || myName === null) {
            setUserName();
        } else if (myName === "陳文凱") {
            localStorage.setItem("name", myName);
            localStorage.setItem("needInputName", "false"); // 已輸入過名字,改為false
            myHeading.innerHTML = "管理員使用中";
        } else {
            localStorage.setItem("name", myName);
            localStorage.setItem("needInputName", "false"); // 已輸入過名字,改為false
            myHeading.innerHTML = "歡迎來到英雄聯盟 " + myName;
        }
    } else {
        let storedName = localStorage.getItem("name");
        myHeading.innerHTML = "歡迎來到英雄聯盟 " + storedName;
    }
}

if (!localStorage.getItem("name")) {
    localStorage.setItem("needInputName", "true"); // 需要輸入名字便設為true
    setUserName();
} else {
    setUserName(); // 如果已經輸入過 提取前一次輸入的名字
}

myButton.onclick = function () {
    localStorage.setItem("needInputName", "true"); // 點擊按鈕後即可換使用者名稱
    setUserName();
};

上一篇
Day-4 學習JavaScript
下一篇
Day-6 更改介面&內容並發布到github上
系列文
sideproject-簡易網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言